<template>
	<view class="page">
		<view v-if="att_info !=''">
			<view class="tick" v-if="att_info.status ==2">您的信息审核失败，请检查后重新提交!</view>
			<view class="tick" v-if="att_info.status ==0">您的信息正在后台审核中，请耐心等待</view>
			<view class="tick tick3" v-if="att_info.status ==1">您的信息已审核通过啦~</view>
		</view>	
		<view class="item">
			<view class="item-con">
				<text class="item-con-title">姓名</text>
				<input type="text" v-model="formData.name" placeholder="请输入真实姓名" />				
			</view>
			<view class="item-con">
				<text class="item-con-title">身份证</text>
				<input type="text" v-model="formData.idcard" placeholder="请输入身份证号码" />
			</view>
			<view class="item-con">
				<text class="item-con-title">手机号</text>
				<input type="text" v-model="formData.phone" placeholder="请输入手机号" />
			</view>
			<!-- <view class="item-con">
				<text class="item-con-title">密码</text>
				<input type="password" v-model="formData.passwords" placeholder="请输入密码" />
			</view> -->
			<view class="item-yzm" v-if="att_info.status ==1 && att_info==''">
				<view class="item-con">
					<text class="item-con-title">验证码</text>
					<input class="flex-1" type="number" v-model="formData.code" placeholder-class="placeholder-class"
						placeholder="输入验证码" />
				</view>

				<view class="get-code-btn" @click="sendCode" :disabled="is_send">{{ send_btn_txt }}</view>
			</view>
		</view>
		<view class="sure">
			<view v-if="att_info==''">
				<view class="startVerify" @click="submit" >开始验证</view>
			</view>	
			<view v-if="att_info!=''&&att_info.status!=1">
				<view class="startVerify" @click="submit" v-if="att_info.status =='0'">正在验证</view>
				<view class="startVerify" @click="submit" v-if="att_info.status =='2'">重新验证</view>
			</view>	
			<view class="protocol">
				开始验证代表同意<text @click="openMsgagreem">《认证服务协议》</text>
			</view>
		</view>
		<view class="msgagreem-item" v-if="msgShow">
			<view class="msgagreem-item-title"  >
				<view></view>
				<view>{{listData.article_title}}</view>
				<image @click="closeMsgagreem" src="../../static/app/close.png"></image>
			</view>
			<view class="msgagreem" v-html="listData.article_content">
				
			</view>
		</view>
		<view class="null d-c-c p30" v-if="listData.length == 0">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[],
				msgShow:false,
				att_info:[],//
				send_btn_txt: '获取验证码',
				/*是否已发验证码*/
				is_send: false,
				/*表单数据对象*/
				formData: {
					types: 1,
					/*手机号*/
					phone: '',
					//password: '',
					//password1: '',
					name: '', //姓名
					idcard: '', //身份证
					/*验证码*/
					code: '',
					business_license:'',//营业执照
					credit_code:'',//信用代码
					legal_person:'',//法人名称
					legal_person_idcard:'',//法人身份证
					legal_person_phone:'',//法人手机（电话）
					person_idcard:'',//负责人身份证
					person_name:'',//负责人名字
					person_phone:'',//负责人手机
				},
			}
		},
		onLoad(e) {
			if (e.select == 1) {
				this.formData.types = e.type
				this.getAttInfo();
				this.getInfo();
			}
		},
		methods: {
			/* 打开协议 */
			closeMsgagreem(){
				this.msgShow = false;
			},
			/* 获取协议 */
			getInfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('plus.article.Article/detail', {
						article_id: 10021
					},
					function(res) {
						self.listData = res.data.detail;
					//	self.loadding = true;
						uni.hideLoading();
					});
			},
			/* 打开协议 */
			openMsgagreem(){
				this.msgShow = true;
			},
			/* 获取用户认证接口 */
			getAttInfo(){
				let self = this;
				uni.showLoading({
					title:'加载中'
				});
				self._post('user.user/attestation_info',{},function(res){
					if(res.data.info != null){
						self.formData = res.data.info;
						self.att_info = res.data.info;
					}
					uni.hideLoading();
					self.loadding = true;
				});
			},
			submit(){
				let self = this;
				
				let bb = /^([\u4e00-\u9fa5]{2,20}|([a-zA-Z]+\s?){2,20})$/;
				if(!bb.test(self.formData.name)){
					uni.showToast({
						title:'请输入正确的姓名',
						duration:2000,
						icon:'none'
					});
					return;
				}
				let id = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if(!id.test(self.formData.idcard)){
					uni.showToast({
						title:'请输入正确的身份证号码',
						duration:2000,
						icon:'none'
					});
					return;
				}
				if(!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.phone)){
					uni.showToast({
						title:'请输入正确的手机号',
						duration:2000,
						icon:'none'
					});
					return;
				}
				if(self.formData.code == ''){
					uni.showToast({
						title:'请输入验证码',
						duration:2000,
						icon:'none'
					});
					return;
				}
				
				uni.showLoading({
					title:'正在提交'
				});
				self._post('user.user/add_attestation_info',
				{
					...self.formData
				},
				function(res){
					if(res.data.info == true){
						uni.navigateTo({
							url:'/pagesUser/home/home'
						})
					}
				});
			},
			/*发送短信*/
			sendCode() {
				let self = this;

				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.phone)) {
					uni.showToast({
						title: '手机有误,请重填！',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				self._post(
					'user.userweb/sendCode', {
						mobile: self.formData.phone,
						type: 'login'
					},
					result => {
						if (result.code == 1) {
							uni.showToast({
								title: '发送成功'
							});
							self.is_send = true;
							self.changeMsg();
						}
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + '秒';
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = '获取验证码';
					this.second = 60;
					this.is_send = false;
				}
			},
		}
	}
</script>

<style>
	.tick{
		color: #FF4586;
		font-size: 28rpx;
		background-color: #F8F8F8;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 30rpx;
	}
	.tick3{
		color: #1546FA;
	}
	.item {
		padding: 40rpx 30rpx;		
	}

	.item-con {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx #E5E6E8 solid;
	}

	.item-con-title {
		width: 100rpx;
		font-size: 30rpx;
		line-height: 16rpx;
		text-align: left;
	}

	.item-con input {
		line-height: 32rpx;
		font-size: 30rpx;
		margin-left: 50rpx;
	}

	.item-yzm {
		display: flex;
		align-items: center;
		border-bottom: 2rpx #E5E6E8 solid;
	}

	.get-code-btn {
		/* width: 200rpx; */
		/* height: 78rpx; */
		/* /line-height: 76rpx; */
		padding: 0rpx 30rpx;
		white-space: nowrap;
		color: $dominant-color;
		font-size: 30rpx;
		color: #1546FA;
	}

	.get-code-btn[disabled='true'] {
		border: 1rpx solid #cccccc;
	}
	.sure{
		width: 100%;
		position: absolute;
		bottom: 30rpx;
		left: 0;
	}
	.startVerify {
		width: 96%;
		margin:  0 auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 10rpx;
		background: linear-gradient(to right, #2554FE 10%, #5E7FFF 100%);
	}
	.protocol{
		color: #999999;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.protocol text{
		color: #2554FE;
		font-weight: 800;
	}
	.msgagreem-item{
		position: fixed;
		top: 0;
		left: 0;		
		height: 100%;		
		overflow-x: scroll;
		background-color: #FFFFFF;
		color: #000000;
		z-index: 999999;	
		
	}
	.msgagreem-item-title{
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
		font-weight: 900;
		padding: 40rpx 26rpx;
		margin-top: 30rpx;
	}
	.msgagreem-item-title image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.msgagreem{
		padding: 10rpx 26rpx;
		font-size: 30rpx;
		height: 100%;
		overflow: scroll;
		padding-bottom: 40rpx;
		text-indent: 60rpx;
	}
	.null{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		background-color: #F4F4F4;
		z-index: 99;
	}
</style>
